<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个根元素</title>
</head>
<h1>单个根元素</h1>

<script src="node_modules/vue/dist/vue.js"></script>

<!--
    每个组件必须只有一个根元素，定义的模板必须是一个根元素。

    正确：
    <div class="blog-post">
        <h3>{{ title }}</h3>
        <div v-html="content"></div>
    </div>


    错误：
    <h3>{{ title }}</h3>
    <div v-html="content"></div>
-->
<body>

<div id="blog-post-demo">
    <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:post="post"
    ></blog-post>
</div>

</body>
<!--
接受一个单独的 post prop
现在，不论何时为 post 对象添加一个新的属性，它都会自动地在 <blog-post> 内可用。
-->
<script>
    Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
    });


    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue', content: 'xxx'},
                { id: 2, title: 'Blogging with Vue' , content: 'yyy'},
                { id: 3, title: 'Why Vue is so fun' , content: 'zzz'}
            ]
        }
    })
</script>
</html>